<div class="flex flex-row items-center gap-x-2 pb-4">
    <span class="text-gray-600 dark:text-slate-300 creme:text-stone-600">Additional Fields</span>
    <a class="cursor-pointer" id="show_additional"
       @click="show_additional = !show_additional">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
         class="w-5 h-5 text-slate-500! dark:text-slate-300! dark:hover:text-white!
                creme:text-stone-600! creme:hover:text-stone-800! hover:text-black!"
         :class="{ 'rotate-90': show_additional }">>
         <path d="m9 18 6-6-6-6"></path>
        </svg>
    </a>
</div>
<p id="notes" x-show="show_additional" x-cloak>
    {{ form.notes.errors }}
    {{ form.notes }}
    <span class="helptext" id="{{ form.notes.auto_id }}_helptext">
        {{ form.notes.help_text|safe }}
    </span>
</p>
{% if ALLOW_PDF_SUB_DIRECTORIES %}
<p id="file_directory" x-show="show_additional" x-cloak>
    {{ form.file_directory.errors }}
    {{ form.file_directory }}
    <span class="helptext" id="{{ form.file_directory.auto_id }}_helptext">
        {{ form.file_directory.help_text|safe }}
    </span>
</p>
{% endif %}
<button class="-pt-4"  x-show="!in_progress" type="submit" >Submit</button>
<button class="-pt-4" x-show="in_progress" x-cloak type="button" disabled>
    <div class="flex justify-center">
        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <span>Processing</span>
    </div>
</button>
